import { createVNode as _createVNode } from "vue";
import { computed, defineComponent } from "vue";
import { createNamespace, HAPTICS_FEEDBACK, makeStringProp } from "../utils/index.mjs";
import { t, bem, getPrevMonth, getPrevYear, getNextMonth, getNextYear } from "./utils.mjs";
import { Icon } from "../icon/index.mjs";
const [name] = createNamespace("calendar-header");
var stdin_default = defineComponent({
  name,
  props: {
    date: Date, // 展示月份的date
    minDate: Date, // 最小日期
    maxDate: Date, // 最大日期
    title: String, // 主标题
    subtitle: String, // 副标题
    showTitle: Boolean, // 是否展示主标题
    showSubtitle: Boolean, // 是否展示副标题
    firstDayOfWeek: Number, // 展示从那天开始
    switchMode: makeStringProp("none") // 模式  none(可滑动) month  year-month
  },
  emits: ["clickSubtitle", "panelChange"],
  setup(props, {
    slots,
    emit
  }) {
    // 获取 上一月一年  下一月一年 切换按钮的状态
    const prevMonthDisabled = computed(() => {
      const prevMonth = getPrevMonth(props.date);
      return props.minDate && prevMonth < props.minDate;
    });
    const prevYearDisabled = computed(() => {
      const prevYear = getPrevYear(props.date);
      return props.minDate && prevYear < props.minDate;
    });
    const nextMonthDisabled = computed(() => {
      const nextMonth = getNextMonth(props.date);
      return props.maxDate && nextMonth > props.maxDate;
    });
    const nextYearDisabled = computed(() => {
      const nextYear = getNextYear(props.date);
      return props.maxDate && nextYear > props.maxDate;
    });
    
    // 主标题渲染函数
    const renderTitle = () => {
      if (props.showTitle) {
        const text = props.title || t("title");
        // 使用插槽或者title展示
        const title = slots.title ? slots.title() : text;
        return _createVNode("div", {
          "class": bem("header-title")
        }, [title]);
      }
    };
    // 点击副标题
    const onClickSubtitle = (event) => emit("clickSubtitle", event);
    const onPanelChange = (date) => emit("panelChange", date);

    // 前后年月切换 渲染函数 
    const renderAction = (isNext) => {
      // 切换模式
      const showYearAction = props.switchMode === "year-month";
      // 获取对应插槽
      const monthSlot = slots[isNext ? "next-month" : "prev-month"];
      const yearSlot = slots[isNext ? "next-year" : "prev-year"];
      // 获取新的disabled状态
      const monthDisabled = isNext ? nextMonthDisabled.value : prevMonthDisabled.value;
      const yearDisabled = isNext ? nextYearDisabled.value : prevYearDisabled.value;
      // 对应iconName
      const monthIconName = isNext ? "arrow" : "arrow-left";
      const yearIconName = isNext ? "arrow-double-right" : "arrow-double-left";
      // 点击 上一月一年  下一月一年 时 触发panelChange事件(传递新值)
      const onMonthChange = () => onPanelChange((isNext ? getNextMonth : getPrevMonth)(props.date));
      const onYearChange = () => onPanelChange((isNext ? getNextYear : getPrevYear)(props.date));

      // 月份切换按钮
      const MonthAction = _createVNode("view", {
        "class": bem("header-action", {
          disabled: monthDisabled
        }),
        "onClick": monthDisabled ? void 0 : onMonthChange
        // 有插槽使用插槽 无 使用默认Icon
      }, [monthSlot ? monthSlot({
        disabled: monthDisabled
      }) : _createVNode(Icon, {
        "class": {
          [HAPTICS_FEEDBACK]: !monthDisabled
        },
        "name": monthIconName
      }, null)]);
      
      // 年切换按钮渲染函数
      const YearAction = showYearAction && _createVNode("view", {
        "class": bem("header-action", {
          disabled: yearDisabled
        }),
        "onClick": yearDisabled ? void 0 : onYearChange
      }, [yearSlot ? yearSlot({
        disabled: yearDisabled
      }) : _createVNode(Icon, {
        "class": {
          [HAPTICS_FEEDBACK]: !yearDisabled
        },
        "name": yearIconName
      }, null)]);
      return isNext ? [MonthAction, YearAction] : [YearAction, MonthAction];
    };

    // 副标题渲染函数
    // props.switchMode !== "none"时, 左右两侧 添加对应 切换按钮
    const renderSubtitle = () => {
      if (props.showSubtitle) {
        const title = slots.subtitle ? slots.subtitle({
          date: props.date,
          text: props.subtitle
        }) : props.subtitle;
        const canSwitch = props.switchMode !== "none";
        return _createVNode("div", {
          "class": bem("header-subtitle", {
            "with-swicth": canSwitch
          }),
          "onClick": onClickSubtitle
        }, [canSwitch ? 
            [renderAction(), 
              _createVNode("div", {
                "class": bem("header-subtitle-text")
              }, [title]), 
              renderAction(true)] 
            : title]);
      }
    };

    // 周布局展示行渲染函数
    const renderWeekDays = () => {
      const {
        firstDayOfWeek
      } = props;
      const weekdays = t("weekdays");
      // 将0-6转为对应 周日-周六 并且按照firstDayOfWeek格式布局
      const renderWeekDays2 = [...weekdays.slice(firstDayOfWeek, 7), ...weekdays.slice(0, firstDayOfWeek)];
      return _createVNode("div", {
        "class": bem("weekdays")
      }, [renderWeekDays2.map((text) => _createVNode("span", {
        "class": bem("weekday")
      }, [text]))]);
    };

    // 整体渲染数
    // 结构 [van-calendar__header[ van-calendar__header-title van-calendar__header- subtitle  van-calendar__weekdays]]
    return () => _createVNode("div", {
      "class": bem("header")
    }, [renderTitle(), renderSubtitle(), renderWeekDays()]);
  }
});
export {
  stdin_default as default
};
